<script setup lang="ts">
import {ref,computed} from "vue"
let student = ref<{
    id:number,
    firstname:string,
    lastname:string
}|null >(null)
student.value = {
    id:100,
    firstname:"An",
    lastname:"ag"
}
//计算属性
let fullname = computed(()=>{

    return student.value?.firstname+"-"+student.value?.lastname
})

const props = defineProps<{
    age:number
}>()

//子传父（emit--触发自定义事件的执行）
// const emit = defineEmits(["add","xxx"])

//用泛型
const emit = defineEmits<{
    (e:"add",v:number,v1:string):void,
    (e:"xxx",v:number):void
}>()

//slot插槽
//默认插槽 名字：default

let ss = ref([
    {name:"erg",age:29},
    {name:"dgh",age:46},
    {name:"fhd",age:66},
    {name:"gew",age:35},

])

</script>

<template>
    <div id="student">
       <div>{{ student?.firstname }}-{{ student?.lastname }}</div>
       firstname:<input type="text" v-model="student.firstname"/><br>
       lastname:<input type="text" v-model="student.lastname"/><br>
       姓(v-bind)：<input v-bind:value="student.firstname">
       <div>全名：{{ fullname }}</div>
       年龄:{{ props.age }}
       <button @click="emit('add',10,'ooo')">增加年龄</button>
       <slot :item="i" v-for="i in ss" :key="i.age">
   
       </slot>
       <slot name="foot"></slot>
    </div>

</template>

<style scoped>
#student{
    background-color: pink;
    padding: 10px;
    box-shadow: 0 0 10px black;
    border-radius: 10px;
  }
</style>